// pages/classify/classify.js
let scrollDdirection = 0; // 用来计算滚动的方向
Page({

  /**
   * 页面的初始数据
   */
  data: {
    navLeftItems: [{
      "id": 1,
      "name": "热销爆品"
    }, {
      "id": 2,
      "name": "新鲜蔬菜"
    }, {
      "id": 3,
      "name": "时令水果"
    }, {
      "id": 4,
      "name": "肉禽蛋品"
    }, {
      "id": 5,
      "name": "快手菜肴"
    }, {
      "id": 6,
      "name": "酒水饮料"
    }, {
      "id": 7,
      "name": "牛奶酸奶"
    }, {
      "id": 8,
      "name": "纸品家清"
    }],
    navRightItems: [],
    selectedSub: 0, // 选中的分类
    scrollHeight: 0, // 滚动视图的高度
    list: Array.from(Array(8), (item, index) => {
      return {
        title: "分类",
        list: Array.from(Array(10))
      }
    }),
    toView: 'position0', // 滚动视图跳转的位置
    scrollTopLeft: 0, //  左边滚动位置随着右边分类而滚动
    inputShowed: false,  //初始文本框不显示内容
  },
  // 使文本框进入可编辑状态
  showInput: function () {
    this.setData({
      inputShowed: true   //设置文本框可以输入内容
    });
  },
  // 取消搜索
  hideInput: function () {
    this.setData({
      inputShowed: false
    });
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    // 加载的使用进行网络访问，把需要的数据设置到data数据对象  
    // var that = this
    // wx.request({
    //   url: 'http://huanqiuxiaozhen.com/wemall/goodstype/typebrandList',
    //   method: 'GET',
    //   data: {},
    //   header: {
    //     'Accept': 'application/json'
    //   },
    //   success: function (res) {
    //     console.log(res)
    //     that.setData({
    //       navLeftItems: res.data,
    //       navRightItems: res.data
    //     })
    //   }
    // })  
    // 获取设备信息
    wx.getSystemInfo({
      success: res => {
        this.setData({
          scrollHeight: res.windowHeight
        })
      }
    })
    // 获取数据
    this.getData();
  },
  // 获取数据
  getData() {
    setTimeout(() => {
      // 异步请求数据,请求完毕并且渲染数据之后才可以执行lisenerScroll
      this.setData({
        // list:requestData // 得到请求的数据，并且渲染视图
      }, () => {
        // 获取所有分类的头部偏移量
        this.lisenerScroll();
      })
    }, 300)
  },

  toScrollView(e) {
    const {
      selectedSub
    } = this.data
    const {
      index
    } = e.currentTarget.dataset
    let left_ = 0
    if (index > 3) {
      left_ = (index - 3) * 50 // 左边侧栏item高度为50，可以根据自己的item高度设置
    }
    this.setData({
      selectedSub: index,
      toView: `position${index}`,
      scrollTopLeft: left_
    })
  },
  /**
   * 获取右边每个分类的头部偏移量
   */
  lisenerScroll() {
    // 获取各分类容器距离顶部的距离
    new Promise(resolve => {
      let query = wx.createSelectorQuery();
      for (let i in this.data.list) {
        query.select(`#position${i}`).boundingClientRect();
      }
      query.exec(function(res) {
        resolve(res);
      });
    }).then(res => {
      this.data.list.forEach((item, index) => {
        item.offsetTop = res[index].top
      })
      this.setData({
        scrollInfo: res,
        list: this.data.list
      })
    });
  },
  /**
   * 监听滚动条滚动事件
   */
  scrollTo(e) {
    const scrollTop = e.detail.scrollTop; //滚动的Y轴
    const {
      selectedSub,
      list
    } = this.data;
    let left_ = 0
    if (scrollDdirection < scrollTop) {
      // 向上滑动
      scrollDdirection = scrollTop
      // 计算偏移位置
      if (selectedSub < list.length - 1 && scrollTop >= list[selectedSub + 1].offsetTop) {
        if (selectedSub > 2) {
          left_ = (selectedSub - 2) * 50
        }
        this.setData({
          selectedSub: selectedSub + 1,
          scrollTopLeft: left_
        })
      }
    } else {
      // 向下滑动
      scrollDdirection = scrollTop
      // 计算偏移位置
      if (selectedSub > 0 && scrollTop < list[selectedSub].offsetTop && scrollTop > 0) {
        if (selectedSub > 3) {
          left_ = (selectedSub - 4) * 50
        }
        this.setData({
          selectedSub: selectedSub - 1,
          scrollTopLeft: left_
        })
      }
    }
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function() {

  }
})